<template>
  <div class="assessing-officer">
    <el-timeline>
      <el-timeline-item v-for="(item, index) in examinerList" :key="index">
        <!-- icon="el-icon-time"
        color="#b3bdbb"-->
        <!-- taskName, taskType,userId,nickName -->
        <div class="liucheng">
          <p style="font-weight: 700">{{ item.taskName }}</p>
          <div>
            <el-tag v-show="item.userId" closable @close="delNick(index)">{{ item.nickName }}</el-tag>
            <el-button v-show="!item.userId" class="button-new-tag" type="primary" icon="el-icon-plus" size="mini"
              circle @click="selectUser(index)" />
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <div class="assessing-officer">抄送人员</div>
    <div>
      <el-tag v-for="(item, index) in copyUserList" :key="index" closable @close="delCopyUser(index)">{{ item.nickName
        }}</el-tag>
      <el-button class="button-new-tag" type="primary" icon="el-icon-plus" size="mini" circle
        @click="selectCopyUser()" />
    </div>
    <address-Book ref="addressBookRef" @callBack="addUser"></address-Book>
    <address-book-select ref="addressBookSelectRef" @callBack="addCopyUser"></address-book-select>
  </div>
</template>
<script>
import AddressBookSelect from '@/components/AddressBook/select.vue';
export default {
  name: 'AssessingOfficer',
  components: {
    AddressBookSelect
  },
  props: {
    examinerData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    examinerData: {
      deep: true,
      handler (val) {
        this.examinerList = val;
      }
    }
  },
  data () {
    return {
      examinerList: [],
      copyUserList: [] // 抄送人员
    };
  },
  created () { },
  mounted () { },
  methods: {
    // 删除人员
    delNick (index) {
      this.examinerList[index].userId = undefined;
      this.examinerList[index].nickName = undefined;
    },
    // 选择人员
    selectUser (code) {
      this.$refs.addressBookRef.init(code);
    },
    // 添加人员
    addUser (info) {
      this.examinerList[info.code].userId = info.userId;
      this.examinerList[info.code].nickName = info.nickName;
    },
    // 返回审批人员对象
    returnInfo () {
      let info = {};
      // 判断是否全部填写完成
      for (let index = 0; index < this.examinerList.length; index++) {
        const element = this.examinerList[index];
        if (!element.userId) {
          this.$modal.msgWarning(`请选择${element.taskName}`);
          return;
        }
        info[element.taskType] = element.userId;
      }
      const userIds = this.copyUserList.map((k) => k.userId);
      info['copyUserIds'] =
        userIds instanceof Array ? userIds.join(',') : userIds;
      return info;
    },
    // 删除抄送人员
    delCopyUser (index) {
      this.copyUserList.splice(index, 1);
    },
    // 选择抄送人员
    selectCopyUser () {
      this.$refs.addressBookSelectRef.init();
    },
    // 添加抄送人员
    addCopyUser (list) {
      const arr = [...this.copyUserList, ...list];
      let map = new Map();
      //去重
      arr.forEach((item) => {
        if (
          item !== undefined &&
          !map.get(item.userId) &&
          !this.examinerList.find((e) => e.userId == item.userId)
        ) {
          map.set(item.userId, item);
        }
      });
      this.copyUserList = [...map.values()];
    },
    reset () {
      this.copyUserList = [];
    }
  }
};
</script>
<style lang="scss" scoped>
.assessing-officer {
  margin-top: 20px;
}

.liucheng {
  position: relative;
  top: -10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-tag {
  margin-left: 10px;
  margin-top: 10px;
}

.button-new-tag {
  margin-left: 20px;
  margin-top: 10px;
}
</style>
